<template>
	<view class="skill-pop" id="popAll" :style="{pointerEvents:show?'fill':'none'}" @click="handlePopClick">
		<view class="content" :style="{height:popHeigh+'rpx',bottom:show?'0rpx':-popHeigh-70+'rpx'}">
			<view class="inner">
				<view class="top-button-list">
					<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap; "
						class="tab-scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
						<view class="tab-list">
							<view class="tab-item" @click="handleTabClick(item,index)"
								:class="{'bag-active-tabItem':activeBtnIndex==index}" v-for="(item,index) in btnList"
								:key="index">

								<view class="tab-content">
									<view class="top-tabName">{{item.name}}</view>
									<view class="line-box"></view>

									<image class="locked-icon" v-if="item.locked"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
										mode="aspectFill"></image>

								</view>

							</view>
						</view>

					</scroll-view>

				</view>
				<view class="inner-center">
					<view class="dressup-box" v-if="activeType=='dressup'">
						<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
							<view class="clothes-item" :class="{acitveItem:actDressUpIndex== index}"
								v-for="(item, index) in dressupDataList" :key="index"
								@click="handleDressupItemClick(item,index)">
								<view class="item-content">
									<image class="item-image" :class="{isSelected:actDressUpIndex==index}"
										:src="item.image" mode="widthFix"></image>
								</view>
								<view class="name">{{item.name}}</view>

								<view class="locked-masker" v-if="item.locked">
									<image class="locked-icon"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cb0549e505a44eb090baa6fd92db7792.png"
										mode=""></image>
								</view>
							</view>
						</scroll-view>
					</view>

					<view class="accomplishment-box" v-if="activeType=='accomplishment'">
						<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
							<view class="clothes-item" :class="{acitveItem:actAccomplishmentIndex== index}"
								v-for="(item, index) in accomplishmentDataList" :key="index"
								@click="handleAccomplishmentItemClick(item,index)">
								<view class="item-content">
									<image class="item-image" :class="{isSelected:actAccomplishmentIndex==index}"
										:src="item.image" mode="widthFix"></image>
								</view>
								<view class="name">{{item.name}}</view>

								<view class="locked-masker" v-if="item.locked">
									<image class="locked-icon"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cb0549e505a44eb090baa6fd92db7792.png"
										mode=""></image>
								</view>
							</view>
						</scroll-view>
					</view>


				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from "vuex";
	export default {
		props: {
			storyId: {
				type: String,
				default: ""
			},
			popHeigh: {
				type: [Number, String],
				default: 330
			},
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			fDataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			popBtnList: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data() {
			return {
				show: false,
				fragmentList: [],
				activeType: "dressup",
				activeBtnIndex: 0,
				actAccomplishmentIndex: -1,
				actDressUpIndex: -1,
				accomplishmentDataList: [],
				dressupDataList: [{
						name: "火辣秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/71ee11eebf0c4f6d8a1a94368cdce6ba.jpg",
						seekTime: 0,
						roleName: "香奈",
						isDefault: true,
						storyId: "",
						locked: false,
					},
					{
						name: "制服诱惑",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1e9ef7b1cf524c09acb62c202ea4f262.jpg",
						seekTime: 9,
						roleName: "咏美",
						isDefault: true,
						storyId: "",
						locked: false,
					},

					{
						name: "清纯可爱",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68075b52d7764ff2b5cf3d8d04856188.jpg",
						seekTime: 17,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
					{
						name: "邻家女孩",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/967231e3cd9c42b9886f9f5b3fedd524.jpg",
						seekTime: 27,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
					{
						name: "青春活力",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6240f630ff6e493a976dcc255af78b6a.jpg",
						seekTime: 34,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					}, {
						name: "青春活力-测",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6240f630ff6e493a976dcc255af78b6a.jpg",
						seekTime: 34,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
					{
						name: "古典风",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1da7b3d841564faa919adbbeeb31a11d.jpg",
						seekTime: 43,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: true,
					},

					{
						name: "足球宝贝",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/52b092eaf7474e90a0144af076637c97.jpg",
						seekTime: 54,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: true,

					}, {
						name: "兔女郎",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d2d005909c5b44b09f30a83d10083ee2.jpg",
						seekTime: 61,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: true,
					},

					{
						name: "兔女郎-测",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d2d005909c5b44b09f30a83d10083ee2.jpg",
						seekTime: 61,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: true,
					},
				],
				btnList: [{
						name: "装扮",
						type: "dressup"
					},
					{
						name: "才艺",
						type: "accomplishment"
					},
					{
						name: "陪玩",
						type: "accompany"
					},
					{
						name: "约会",
						type: "date"
					},
					// {
					// 	name: "礼物",
					// 	type: "gift"
					// }
				]

			}
		},
		computed: {

		},
		watch: {
			show: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit("show")
					} else {
						this.$emit("close")
					}
				},
				deep: true,
				immediate: true
			},

			fDataList: {
				handler(newVal, oldVal) {
					if (newVal.length) {
						this.accomplishmentDataList = newVal
						this.dressupDataList = newVal
					}

				},
				deep: true,
				immediate: true
			},
			popBtnList: {
				handler(newVal, oldVal) {
					this.btnList = [...newVal]
				},
				deep: true,
				immediate: true
			}



		},
		mounted() {

		},
		methods: {
			handleAccomplishmentItemClick(item, index) {
				if (!item.locked) {
					this.actAccomplishmentIndex = index
					this.show = false
					this.actAccomplishmentIndex = -1
					if (!item.isJumpStory) {
						this.$emit('result', {
							type: 'seek',
							data: Number(item.seekTime)
						})
					} else {
						this.$emit('result', {
							type: 'jumpStory',
							data: String(item.storyId)
						})
					}


				}
			},
			handleDressupItemClick(item, index) {
				if (!item.locked) {
					this.actDressUpIndex = index
					if (!item.isJumpStory) {
						this.$emit('result', {
							type: 'seek',
							data: Number(item.seekTime)
						})
					} else {
						this.$emit('result', {
							type: 'jumpStory',
							data: String(item.storyId)
						})
					}
				}
			},
			handleTabClick(item, index) {
				if (!item.locked) {
					this.activeBtnIndex = index
					this.activeType = item.type
				} else {
					this.$emit('result', {
						type: 'locked',
						data: ""

					})
				}


			},
			handlePopClick(e) {
				if (e.target.id == "popAll" && this.maskCloseAble) {
					this.show = false
					this.$emit("close")
				}
			},

			getProps() {

			},


			open(data) {
				console.log("传递过来的数据是", data);
				this.btnList.forEach((item, index) => {
					if (item.type == data.type) {
						this.activeBtnIndex = index
						this.activeType = data.type
					}
				})
				this.show = true

			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.skill-pop {
		pointer-events: fill;
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		z-index: 999999999999;

		.content {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100vw;
			box-sizing: border-box;
			background-color: transparent;
			transition: bottom 0.3s;
			pointer-events: fill;
			box-sizing: border-box;

			.inner {
				position: relative;
				width: 100%;
				height: 100%;
				// background-color: rgba(255, 255, 255, 1);
				background-color: rgba(255, 255, 255, 0);
				backdrop-filter: blur(15rpx);


				// box-shadow: 0rpx 0rpx 6rpx #fff;
				box-sizing: border-box;
				// padding: 20rpx;
				padding-top: 0rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;

				.top-button-list {
					position: relative;
					width: 100%;
					box-sizing: border-box;


					.tab-scroll-content {
						position: relative;
						width: 100%;
						height: 40rpx;
						box-sizing: border-box;
						// padding: 0 35rpx;
						overflow: hidden;
						background-color: rgba(59, 61, 84, .2);
						box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, .6);


					}

					.tab-bottom-line {
						position: absolute;
						left: 0rpx;
						bottom: 6rpx;
						width: 100%;
						height: 2rpx;
						opacity: 0.2;
						box-sizing: border-box;
						padding: 0rpx 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 9;

						.line-center {
							width: 100%;
							height: 100%;
							background-image: linear-gradient(to right, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, .8)15%, rgba(255, 255, 255, .8)85%, rgba(255, 255, 255, 0)100%);
						}
					}

					.tab-list {
						display: inline-block;
						height: 40rpx;
						// background-color: rgba(59, 61, 84, .2);
						// margin-top: 2rpx;
						// margin-bottom: 2rpx;

					}


					.tab-item {
						position: relative;
						// flex: 1;
						width: 150rpx;
						// height: 80rpx;
						height: 40rpx;
						display: inline-block;
						text-align: center;
						// flex-direction: column;
						// justify-content: center;
						// align-items: center;
						// background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
						// color: #646369;
						color: #fff;
						// background-color: rgba(59, 61, 84, .1);
						// margin-right: 20rpx;
						// border-bottom-left-radius: 10rpx;
						// border-bottom-right-radius: 10rpx;
						border-radius: 2rpx;
						overflow: hidden;
						// box-shadow: 0 0 2rpx rgba(255, 255, 255, 1);
						// margin-top: 5rpx;
						// margin-bottom: 5rpx;

						.tab-content {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
						}



						.top-tabName {
							font-size: 22rpx;
							line-height: 40rpx;
							// font-weight: 700;
						}

						.bottom-tabType {
							font-size: 18rpx;
						}

						.line-box {
							position: absolute;
							right: 0rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 2rpx;
							height: 30rpx;
							background-color: rgba(255, 255, 255, .3);
							opacity: 0.3;
						}

						.locked-icon {
							// position: absolute;
							// right: 0rpx;
							// top: 0rpx;
							width: 25rpx;
							height: 25rpx;
							margin-left: 5rpx;
						}

						&:last-child {

							// margin-right: 5rpx;
							// .line-box {
							// 	opacity: 0;
							// }
						}

						&:first-child {
							// margin-left: 5rpx;
						}


					}

					.bag-active-tabItem {
						// background-color: #fff;
						// color: #2d2d2d;



						// background-color: #fadd8c;
						// box-shadow: 0 0 10rpx #fadd8c;
						// color: #572c0d;


						// background-image: linear-gradient(to right, #fef9d9, #f3f1c6);
						// color: #b27439;

						background-color: rgba(248, 239, 224, 1);
						color: #715a52;
						text-shadow: 1rpx 1rpx 1rpx rgba(255, 255, 255, .5);
						animation: bagTabScale 0.2s linear;
						box-shadow: inset 0rpx 0rpx 4rpx #fff;



					}

					@keyframes bagTabScale {
						0% {
							transform: scale(1);
						}

						50% {
							transform: scale(1.1);
						}

						100% {
							transform: scale(1);
						}

					}
				}

				.inner-center {
					flex: 1;
					width: 100%;
					margin-top: 10rpx;

					.dressup-box,
					.accomplishment-box {
						width: 100%;
						height: 270rpx;

						.scroll-content {
							width: 100%;
							height: 270rpx;
							// background-color: red;
							// background-color: rgba(0, 0, 0, .3);

							.clothes-item {
								position: relative;
								box-sizing: border-box;
								display: inline-block;
								width: 142.5rpx;
								height: 254rpx;
								// background-color: gold;
								margin-right: 2rpx;
								// margin-top: 20rpx;
								// border-radius: 15rpx;
								border-radius: 8rpx;

								border: 2rpx solid transparent;
								overflow: hidden;

								&:first-child {
									margin-left: 10rpx;
								}

								&:last-child {
									margin-right: 10rpx;
								}

								.locked-masker {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									background-color: rgba(0, 0, 0, .3);
									display: flex;
									justify-content: center;
									align-items: center;

									.locked-icon {
										width: 40rpx;
										height: 40rpx;
									}
								}


								// border: 2rpx solid #000;
								.item-content {
									width: 100%;
									height: 100%;
									// border-top-left-radius: 15rpx;
									// border-bottom-right-radius: 15rpx;
									border-radius: 8rpx;
									overflow: hidden;


									.item-image {
										width: 100%;
										height: 100%;
										// border-top-left-radius: 15rpx;
										// border-bottom-right-radius: 15rpx;
										border-radius: 8rpx;
										object-fit: cover;

									}

									.isSelected {
										animation: selecteAni 0.2s linear;
									}

									@keyframes selecteAni {

										0% {
											transform: scale(1);
										}


										50% {
											transform: scale(1.2);
										}

										100% {
											transform: scale(1);
										}

									}


								}

								.name {
									position: absolute;
									left: 0rpx;
									bottom: 0rpx;
									width: 100%;
									height: 35rpx;
									font-size: 20rpx;
									font-weight: 700;
									line-height: 35rpx;
									color: #fff;
									text-align: center;
									text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
									background-color: rgba(0, 0, 0, .3);
									border-radius: 0rpx 0rpx 8rpx 8rpx;

								}




							}

							.acitveItem {
								border-color: #fff;
							}
						}
					}
				}


			}


		}


	}
</style>